<template>
    <div draggable="true" class="box" ref="box"></div>
</template>
  
<script>
import { defineComponent, nextTick } from 'vue'
export default defineComponent({
    props: {
    },
    components: {
    },
    data() {
        return {

        }
    },
    mounted() {
        console.log(this.$refs.box, 88)
        let box = document.querySelector('.box');
        // 用于保存鼠标在节点中的位置
        let initX = null,
            initY = null;
        box.addEventListener('dragstart', (e) => {
            // 在开始拖拽,保存鼠标在节点中的位置
            initX = e.offsetX;
            initY = e.offsetY;
        })
        box.addEventListener('drag', (e) => {
            // 拖拽过程中,如果不减去鼠标在节点中的位置,会出现 div 的左上角与 鼠标位置重合
            // 中间会有 "闪现" 的效果
            let _left = e.clientX - initX
            let _top = e.clientY - initY
            if (_left < 0) {
                _left = 0;
            } else if (_left > window.innerWidth - box.offsetWidth) {
                _left = window.innerWidth - box.offsetWidth;
            }

            if (_top < 0) {
                _top = 0;
            } else if (_top > window.innerHeight - box.offsetHeight) {
                _top = window.innerHeight - box.offsetHeight;
            }

            box.style.left = _left + 'px';
            box.style.top = _top + 'px';
            // 这个过程结束后,e.clientX和e.clientY都会变成0
            // 就会导致 left 和 top 的值变为负值
        })
        box.addEventListener('dragend', (e) => {
            // 所以结束的时候也要设置位置,
            // 不然盒子会闪现到左上角
            let _left = e.clientX - initX
            let _top = e.clientY - initY
            if (_left < 0) {
                _left = 0;
            } else if (_left > window.innerWidth - box.offsetWidth) {
                _left = window.innerWidth - box.offsetWidth;
            }

            if (_top < 0) {
                _top = 0;
            } else if (_top > window.innerHeight - box.offsetHeight) {
                _top = window.innerHeight - box.offsetHeight;
            }
            
            box.style.left = _left + 'px';
            box.style.top = _top + 'px';
        })
    },
    computed: {
    },
    watch: {
    },
    methods: {
    }
})
</script>
<style scoped>
.box {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    position: absolute;
    top: 0;
    left: 0;
}
</style>